<template>
    <div>
        <el-pagination
            background
            layout="prev, pager, next"
						:page-sizes="[5, 10]"
            :page-size="pageSize"
            :current-page="pageNum"
            :total="total"
            @current-change="onPageChanged"
        >
        </el-pagination>
        <el-table
                :data="tableData"
                border
                style="width: 100%">

            <el-table-column
                    fixed
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                    <template slot-scope="scope">
                      <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
                    </template>
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="书名">
            </el-table-column>

            <el-table-column
                    prop="author"
                    label="作者">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="数据库id"
                    width="80"
                    align="center">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <!--<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>-->
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
// sessionStorage persistence
const STORAGE_KEY = "saved_page_num";
const savedPageNum = {
    fetch: function() {
        return JSON.parse(
            sessionStorage.getItem(STORAGE_KEY)
            || "1" // 约定UI页码从1开始
        );
    },
    save: function(pageNum) {
        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(pageNum));
    }
};

    export default {
        methods: {
            edit(row) {
                //console.log(row);
                //this.$router.push('/BookUpdate')
                this.$router.push({
                    path: '/update',
                    query:{
                        id: row.id
                    }
                })
            },

            deleteBook(row){
                const _this = this;
                axios.delete('/book/delete?id='+row.id).then(function () {
                    console.log('_this.nItemsOnCurrPage is', _this.nItemsOnCurrPage)
                    if (_this.nItemsOnCurrPage <= 1 && _this.pageNum >= 2) {
                        _this.pageNum -= 1
                    }
                    _this.onPageChanged(_this.pageNum)
                }).then(function (resp) {
                    _this.$alert('《'+row.name+'》删除成功!', '提示', {
                        confirmButtonText: '知道了',
                        callback: action => {
                            //动态刷新
                            _this.reload()//
                            //window.location.reload()
                            //_this.$router.push('/BookManage')


                            //console.log('aaa')

                            //console.log('_this.pageNum is', _this.pageNum)

                            // savedPageNum.save(_this.pageNum) // 注意约定UI页码从1开始(后端服务API页码从0开始)
                            // axios2.get('/book/index?page=' + String(_this.pageNum-1) + '&size=' + String(_this.pageSize)).then(function (resp) {
                            //     _this.tableData = resp.data.content
                            //     _this.total = resp.data.totalElements
                            //     _this.totalPages = resp.data.totalPages
                            //     _this.nItemsOnCurrPage = resp.data.numberOfElements
                            // })

                        }
                    })
                });

                //this.reload()
            },

            onPageChanged(toPageNum) {
                this.pageNum = parseInt(toPageNum)
                savedPageNum.save(this.pageNum) // 注意约定UI页码从1开始(后端服务API页码从0开始)
                const _this = this;
                axios2.get('/book/index?page=' + String(this.pageNum-1) + '&size=' + String(this.pageSize)).then(function (resp) {
                    _this.tableData = resp.data.content
                    _this.total = resp.data.totalElements
                    _this.totalPages = resp.data.totalPages
                    _this.nItemsOnCurrPage = resp.data.numberOfElements
                    //console.log(__this.nItemsOnCurrPage)
                    // console.log(_this.total)
                    // console.log(_this.tableData)
                })
            }
        },

        created() {
            const _this = this;
            axios2.get('/book/index?size=' + String(this.pageSize) + '&page=' +  String(this.pageNum-1)).then(function (resp) {
                _this.tableData = resp.data.content;
                _this.total = resp.data.totalElements;
                _this.totalPages = resp.data.totalPages
                _this.nItemsOnCurrPage = resp.data.numberOfElements
            })
        },

        data() {
            return {
                pageNum: savedPageNum.fetch(), // 后端服务API约定页码从0开始
                pageSize: 10,
                total: 0,
                totalPages: 0,
                nItemsOnCurrPage: 0,
                tableData: null
            }
        }
    }
</script>